"use client"; // 错误边界必须是客户端组件

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // 将错误记录到错误报告服务
    console.error("Error boundary caught an error:", error);
  }, [error]);

  return (
    <div className="p-4 bg-red-100 text-red-800">
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button
        onClick={() => reset()} // 尝试通过重新渲染恢复
        className="mt-2 bg-blue-500 text-white p-2 rounded"
      >
        Try again
      </button>
    </div>
  );
}
